<template>
    <!-- 对话框表单 -->
    <el-dialog
        class="ba-operate-dialog splite-record"
        :close-on-click-modal="false"
        :model-value="props.show"
        @close="baTable.toggleForm"
        min-width="400" 
        width="90%"
        style="max-width: 100%; max-height: calc(100vh - 100px);"
        :before-close="close"
    >
    
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">拆分记录</div>
        </template>
        <div style="margin: 0 -20px; height: 100%;" class="sss">
        <!-- <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar"> -->
            <!-- <div class="split" style="height: 500px;overflow: auto;"> -->
                <Table ref="tableRef" :pagination="false" height="300" width="50%" class="sss">
                    <template #batch_operate>
                        <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                        <el-table-column label="更改状态" width="248" align="center">
                            <template #default="scope" slot-scope="scope">
                                <div style="height: 195px; vertical-align: middle; display: table-cell; width: 280px;">
                                    <div style="width: 100%;">
                                        <div class="withdraw-box" style="text-align: center; width: 100%; display: block;">
                                            <div class="btn btn-danger" @click="withdrawStatus(scope.row)">撤回状态</div>
                                        </div>
                                        <div class="operate-btn" style="text-align: center;">

                                            <!-- 准备下单 -->
                                            <div v-if="scope.row.status == 0">
                                                <span>
                                                    <span :class="[scope.row.current_status == 1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 1)">已下单</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == -1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, -1)">取消订单</span>
                                                </span>
                                            </div>

                                            <!-- 已下单 -->
                                            <div v-if="scope.row.status == 1">
                                                <span>
                                                    <span :class="[scope.row.current_status == 2 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 2)">现货</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 7 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 7)">待定</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 4 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 4)">口头预定</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == -1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, -1)">取消订单</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 8 || scope.row.current_status == '8-1' || scope.row.current_status == '8-2' || scope.row.current_status == '8-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 8)">退款</span>
                                                </span>
                                            </div>

                                            <!-- 现货 -->
                                            <div v-if="scope.row.status == 2">
                                                <span>
                                                    <span :class="[scope.row.current_status == 5 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 5)">入库</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 6 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 6)">韩国已发货</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 9)">换货</span>
                                                </span>
                                            </div>

                                            <!-- 入库 -->
                                            <div v-if="scope.row.status == 5">
                                                <span>
                                                    <span :class="[scope.row.current_status == 6 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 6)">韩国已发货</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 9)">换货</span>
                                                </span>
                                            </div>

                                            <!-- 韩国已发货 -->
                                            <div v-if="scope.row.status == 6">
                                                <span>
                                                    <span :class="[scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 9)">换货</span>
                                                </span>
                                            </div>

                                            <!-- 换货 -->
                                            <div v-if="scope.row.status == '9-1' || scope.row.status == '9-2' || scope.row.status == '9-3' || scope.row.status == '9-4'">
                                                <span>
                                                    <span :class="[scope.row.current_status == 10 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 10)">已提货</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 8 || scope.row.current_status == '8-1' || scope.row.current_status == '8-2' || scope.row.current_status == '8-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 8)">退款</span>
                                                </span>
                                            </div>

                                            <!-- 已提货 -->
                                            <div v-if="scope.row.status == 10">
                                                <span>
                                                    <span :class="[scope.row.current_status == 5 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 5)">入库</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 6 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 6)">韩国已发货</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 9)">换货</span>
                                                </span>
                                            </div>

                                            <!-- 付款预定 -->
                                            <div v-if="scope.row.status == 3">
                                                <span>
                                                    <span :class="[scope.row.current_status == 10 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 10)">已提货</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 8 || scope.row.current_status == '8-1' || scope.row.current_status == '8-2' || scope.row.current_status == '8-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 8)">退款</span>
                                                </span>
                                            </div>

                                            <!-- 口头预定 -->
                                            <div v-if="scope.row.status == 4">
                                                <span>
                                                    <span :class="[scope.row.current_status == 2 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 2)">现货</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 7 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 7)">待定</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == -1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, -1)">取消订单</span>
                                                </span>
                                            </div>

                                            <!-- 待定 -->
                                            <div v-if="scope.row.status == 7">
                                                <span>
                                                    <span :class="[scope.row.current_status == 2 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 2)">现货</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == 4 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 4)">口头预定</span>
                                                </span>
                                                <span>
                                                    <span :class="[scope.row.current_status == -1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, -1)">取消订单</span>
                                                </span>
                                            </div>
                                            
                                            
                                        </div>
                                        <!-- 现货数量 -->
                                        <div v-if="scope.row.current_status == 2" style="width: 100px; margin: 0 auto 10px auto;">
                                            <el-input v-model="scope.row.stock_split" :value="[scope.row.stock_split ? scope.row.stock_split : scope.row.num]" placeholder="" type="number" />
                                        </div>
                                        <!-- 入库数量 -->
                                        <div v-if="scope.row.current_status == 5" style="width: 100px; margin: 0 auto 10px auto;">
                                            <el-input v-model="scope.row.storage_split" :value="[scope.row.storage_split ? scope.row.storage_split : scope.row.num]" placeholder="" type="number" />
                                        </div>
                                        <!-- 韩国已发货数量 -->
                                        <div v-if="scope.row.current_status == 6" style="width: 100px; margin: 0 auto 10px auto;">
                                            <el-input v-model="scope.row.krw_split" :value="[scope.row.krw_split ? scope.row.krw_split : scope.row.num]" placeholder="" type="number" />
                                        </div>
                                        <!-- 提货数量 -->
                                        <div v-if="scope.row.current_status == 10" style="width: 100px; margin: 0 auto 10px auto;">
                                            <el-input v-model="scope.row.delivery_split" :value="[scope.row.delivery_split ? scope.row.delivery_split : scope.row.num]" placeholder="" type="number" />
                                        </div>
                                        <!-- 付款预定 天数 数量 -->
                                        <div v-if="scope.row.current_status == 3" style="margin-bottom: 10px;">
                                            <span style="width: 80px; display: inline-block; margin-right: 5px;">
                                                <el-input v-model="scope.row.pay_reserve_day_split" placeholder="天数" type="number" />
                                            </span>
                                            <span style="width: 80px; display: inline-block;">
                                                <el-input v-model="scope.row.pay_reserve_num_split" :value="[scope.row.pay_reserve_num_split ? scope.row.pay_reserve_num_split : scope.row.num]" placeholder="数量" type="number" />
                                            </span>
                                        </div>
                                        <!-- 口头预定 天数 数量 -->
                                        <div v-if="scope.row.current_status == 4" style="margin-bottom: 10px;">
                                            <span style="width: 80px; display: inline-block; margin-right: 5px;">
                                                <el-input v-model="scope.row.verbal_reserve_day_split" placeholder="天数" type="number" />
                                            </span>
                                            <span style="width: 80px; display: inline-block;">
                                                <el-input v-model="scope.row.verbal_reserve_num_split" :value="[scope.row.pay_reserve_num_split ? scope.row.pay_reserve_num_split : scope.row.num]" placeholder="数量" type="number" />
                                            </span>
                                        </div>
                                        <!-- 换货类型 -->
                                        <div v-if="scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4'" style="margin-bottom: 10px;">
                                            <span style="padding: 0 8px;margin-right: 5px;" :class="[scope.row.current_status == '9-1' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '9-1')">颜色</span>
                                            <span style="padding: 0 8px;margin-right: 5px;" :class="[scope.row.current_status == '9-2' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '9-2')">尺码</span>
                                            <span style="padding: 0 8px;margin-right: 5px;" :class="[scope.row.current_status == '9-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '9-3')">瑕疵</span>
                                            <span style="padding: 0 8px;" :class="[scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '9-4')">款式</span>
                                        </div>
                                        <!-- 退款类型 -->
                                        <div v-if="scope.row.current_status == 8 || scope.row.current_status == '8-1' || scope.row.current_status == '8-2' || scope.row.current_status == '8-3'" style="margin-bottom: 10px;">
                                            <span style="margin-right: 5px;" :class="[scope.row.current_status == '8-1' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '8-1')">延迟</span>
                                            <span style="margin-right: 5px;" :class="[scope.row.current_status == '8-2' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '8-2')">断货</span>
                                            <span :class="[scope.row.current_status == '8-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '8-3')">特殊</span>
                                        </div>

                                        <div @click="saveStatus(scope.row, scope.$index)" v-if="scope.row.current_status != null && scope.row.current_status != undefined && scope.row.current_status != -999 && scope.row.current_status != 9" class="btn confirm-btn">
                                            <div>确定</div>
                                        </div>
                                    </div>
                                    
                                    
                                    
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template #note>
                        <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                        <el-table-column label="备注" align="center" min-width="350" class-name="note">
                            <template #default="scope">
                                <div class="note-box" style="height: 195px; display: grid; grid-template-rows: 163px 32px;">
                                    <div class="note-content-box" style="align-self: flex-start; text-align: left; height: 163px; overflow: auto;">
                                        <div v-for="(item, key) in scope.row.suborder_note" :key="key">
                                            <span>{{ item.admin.username }}：</span>
                                            <span>{{ item.content }}</span>
                                            <span style="margin-left: 5px;">
                                                <el-popconfirm title="确定要删除这个备注吗?" @confirm="delNote(item.id, key, scope.row)">
                                                    <template #reference>
                                                        <Icon name="el-icon-Delete" color="#bd362f" size="15" style="position: relative; top: 2px; cursor: pointer;" />
                                                    </template>
                                                </el-popconfirm>
                                                
                                            </span>
                                            
                                        </div>
                                    </div>
                                    <div style="align-self: flex-end; height: 32px; text-align: left;">
                                        <el-input v-model="scope.row.new_note" placeholder="" style="width: calc(100% - 70px);" />
                                        <span class="btn" style="width: 50px; margin-left: 5px;" @click="addNote(scope.row.order_goods_id, scope.row.new_note, scope.row)">提交</span>
                                    </div>
                                </div>
                                
                            </template>
                        </el-table-column>
                    </template>
                    <template #shipment_status>
                        <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                        <el-table-column label="出货状态" align="center" width="150" class-name="shipment-status">
                            <template #default="scope">
                                <!-- 自定义 -->
                                <div>
                                    <el-text class="mx-1" size="">
                                        {{ scope.row.status_text }}<span v-if="scope.row.status == 3">{{ scope.row.pay_reserve_day }}天</span><span v-if="scope.row.status == 4">{{ scope.row.verbal_reserve_day }}天</span>
                                    </el-text>
                                </div>
                                <div style="margin-top: 5px;">
                                    <span class="btn" v-blur @click="popupShipmentStatus(scope.row.id)">操作记录</span>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template #brand_name>
                        <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                        <el-table-column label="品牌名" align="center" width="110" class-name="split-log">
                            <template #default="scope">
                                <!-- 自定义 -->
                                <div>
                                    <el-text class="mx-1" size="">
                                        {{ scope.row.brand_name }}
                                    </el-text>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                </Table>
            <!-- </div> -->
            
            <OperateLog 
                v-if="shipment_data.show" 
                :show="shipment_data.show" 
                :id="shipment_data.id"
                @hideShipmentStatusLog="hideShipmentStatusLog" 
                @loadShipmentStatusLog="loadShipmentStatusLog"
            />
        </div>
        <!-- </el-scrollbar> -->
        
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, provide, onMounted, reactive, markRaw } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import OperateLog from './operate_log.vue'

import renderOrderNum from './render/order_num.vue';
import renderPurchasePrice from './render/purchase_price.vue';
import renderColor from './render/color.vue';
import renderSize from './render/size.vue';

import { updateStatusApi, withdrawStatusApi, addNoteApi, delNoteApi } from '/@/api/backend/order/merge'

const emit = defineEmits(["hideSpliteRecord"])

defineOptions({
    name: 'splitRecord',
})

const { t } = useI18n()


interface Props {
    show: boolean
    id: number
}

const props = defineProps<Props>()

const shipment_data = reactive({
    show: false,
    id: 0,
})
const splitRecordData = reactive({
    show: false,
    id: 0,
})

const shortcuts = [{ // 自定义日期
    text: '昨天',
    value: () => {
        const end = new Date()
        const start = new Date()
        end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
        return [start, end]
    },
},{
    text: '今天',
    value: () => {
        const end = new Date()
        const start = new Date()
        return [start, end]
    },
},{
    text: '3天内',
    value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
        return [start, end]
    },
},{
    text: '7天内',
    value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
    },
},{
    text: '15天内',
    value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
        return [start, end]
    },
},{
    text: '30天内',
    value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
    },
}];

const popupShipmentStatus = (id: number) => {
    baTable.form.operate = 'shipment_status';
    shipment_data.id = id;
    shipment_data.show = true;
}

const popupSplitRecord = (id: number) => {

    baTable.form.operate = 'split_status';
    splitRecordData.id = id;
    splitRecordData.show = true;
}

const search = () => {
    console.log(state);
    load()
}

const clickStatus = (status: number) => {
    if(state.status.includes(status)){
        state.status.forEach((item, i) => {
            if (item == status) {
                state.status.splice(i, 1); // 从下标 i 开始, 删除 1 个元素
            }
        })
    }else{
        state.status.push(status);
    }
}

const delNote = (id: number, key: number, row: anyObj) => {
    delNoteApi(id).then((e) => {
        if(e.code == 1){
            row.suborder_note.splice(key, 1);
        }
    })
}

// 隐藏
const hideShipmentStatusLog = () => {
    shipment_data.show = false;
}
const hideSpliteRecord = () => {
    splitRecordData.show = false;
}
// 重新加载直播订单表格
const loadShipmentStatusLog = () => {
}

/**
 * 添加备注
 * @param order_goods_id 子订单id
 * @param note 备注内容
 */
const addNote = (order_goods_id: number, note: string, row: anyObj) => {
    let data = {
        suborder_id: order_goods_id,
        content: note
    }
    addNoteApi(data).then((e) => {
        console.log(e);
        if(e.code == 1){
            row.new_note = '';
            row.suborder_note.push(e.data)
        }
    })
}


/**
 * 点击出货状态按钮
 * @param row 当前行数据
 * @param value 更改后的状态值
 */
const setShipmentStatus = (row, value) => {
    row.current_status = row.current_status == value ? -999 : value;
}

// 撤回出货状态
const withdrawStatus = (row: anyObj) => {
    withdrawStatusApi(row.order_goods_id).then((e) => {
        console.log(e)
        if(e.code == 1){
            row.status_text = e.data.status_text;
            row.status = e.data.status;
            row.current_status = -999;
        }
    })
}

// 更新出货状态
const saveStatus = (row: anyObj, index: number) => {
    console.log(row);
    
    updateStatusApi(row).then((e) => {
        console.log(e)
        if(e.code == 1){
            
            row.status_text = e.data.row.status_text;
            row.status = e.data.row.status;
            row.num = e.data.row.num;
            row.total_price_text = e.data.row.total_price_text;
            row.pay_reserve_day = e.data.row.pay_reserve_day;
            row.verbal_reserve_day = e.data.row.verbal_reserve_day;
            row.current_status = -999;

            if(e.data.split_order){
                baTable.table.data!.splice(index + 1, 0, e.data.split_order);
            }
            
        }
    })
}


// 关闭选择样品的弹窗
const close = (done: () => void) => {
    emit("hideSpliteRecord")
    done();
}

const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons([])
/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/order.Merge/'),
    {
        pk: 'id',
        column: [
            { 
                label: t('品牌名'), 
                prop: 'brand_name', 
                align: 'center', 
                sortable: false,
                width: 110,
                render: 'slot', 
                slotName: 'brand_name',
            },
            { label: t('商品图'), prop: 'goods_cover', align: 'center', render: 'image', operator: false, width: 100 },
            { label: t('客户名'), prop: 'username', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false, width: 90 },
            { label: t('商品名'), prop: 'goods_name', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false, width: 120 },
            { 
                label: t('颜色'), 
                prop: 'color', 
                width: 80, 
                align: 'center', 
                operator: false,
                render: 'customRender',
                customRender: markRaw(renderColor)
            },
            { 
                label: t('尺码'), 
                prop: 'size', 
                width: 60, 
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'), 
                operator: 'LIKE', 
                sortable: false,
                render: 'customRender',
                customRender: markRaw(renderSize)
            },
            { label: t('品牌原价'), prop: 'price_text', width: 90, align: 'center', operator: 'RANGE', sortable: false },
            { label: t('采购价格'), prop: 'supply_price_text', width: 90, align: 'center', operator: 'RANGE', sortable: false },
            { 
                label: t('DC价格'), 
                prop: 'purchase_price_text', 
                width: 90, 
                align: 'center', 
                operator: 'RANGE', 
                sortable: false,
                render: 'customRender', 
                customRender: markRaw(renderPurchasePrice),
            },
            { 
                label: t('数量'), 
                prop: 'num', 
                width: 60, 
                align: 'center', 
                sortable: false,
                render: 'customRender', 
                customRender: markRaw(renderOrderNum),
            },
            { label: t('总价'), prop: 'total_price_text', width: 90, align: 'center', sortable: false },
            { 
                label: t('出货状态'), 
                prop: 'id', 
                align: 'center', 
                sortable: false,
                width: 130,
                render: 'slot', 
                slotName: 'shipment_status',
            },
            { 
                label: t('批量更改状态'), 
                prop: 'id', 
                align: 'center', 
                sortable: false, 
                width: 320,
                render: 'slot', 
                slotName: 'batch_operate',
                renderHeader: function({ column, $index }){
                    return BatchOperateHeader(column, $index)
                }
            },
            { 
                label: t('备注'), 
                prop: 'note', 
                align: 'center', 
                operatorPlaceholder: t('Fuzzy query'), 
                operator: 'LIKE', 
                sortable: false,
                render: 'slot', 
                slotName: 'note'
            }
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: {  },
    }
)

provide('baTable', baTable)

const state = reactive({
    brand_id: 0, // 商品品牌
    place_order_time: '', // 下单时间
    user_id: 0, // 用户ID
    username: '', // 用户账号
    goods_and_brand: '', // 品牌和商品名称
    goods_name: '', // 商品名称
    type: -999, // 订单类型
    status: [], // 订单状态
    allStatus: [-999, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
})

onMounted(() => {
    // baTable.table.ref = tableRef.value
    // baTable.mount()
    baTable.table.filter!.id = props.id;
    baTable.table.filter!.state = state;
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})

</script>

<style scoped lang="scss">
.withdraw-box{
    margin-bottom: 15px;
}
.operate-btn > div > span{
    margin-bottom: 5px;
    display: inline-block;
    margin: 0px 5px 8px 0px;
}

</style>
